<!DOCTYPE html>
<html lang="en" ng-app="appListApp">
  <head>
    <meta charset="utf-8">
    <meta name="robots" content="index,follow">
    <meta http-equiv="cache-control" content="public">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="Content-Language" content="en, english" />
    <link rel="icon" type="image/png" href="images/favicon.png">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/loklak.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/js/html5shiv.min.js"></script>
      <script src="/js/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/loklak.js"></script>
    <meta name="description"
          content="loklak provides an easy-to-extend app infrastructure.
                   Here is a list of large-data evaluation applictions.">
    <title>Loklak Apps</title>
    <script src="js/angular-route.min.js"></script>
    <script src="js/angular-touch.min.js"></script>
    <link href="css/dashboard.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/animate.css" rel="stylesheet"/>
    <script src="js/typeahead.bundle.js"></script>
    <script type="text/javascript" src="js/navdrawer-main.js"></script>
  </head>
  <body data-spy="scroll" data-target="#navSidebar" data-offset="50" ng-app="loklak" ng-controller="app_list">
    <nav class="navbar navbar-fixed-top navbar-light navbar-color">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed navbar-collapse-button"
            data-toggle="collapse" data-target="#navbar" aria-expanded="false"
            aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand brand" href="http://apps.loklak.org">
            loklak <span>apps</span>
          </a>
          <div class="form-group search">
            <input type="text" class="form-control" id="usr" ng-model="searchTerm"
              ng-init="searchTerm = ''" placeholder="Search apps by app name or author's name" ng-change="checkApp()">
            <span class="input-group-btn">
              <button class="btn loklak-btn" type="submit">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
        </div>
        <div id="navbar" class="navbar-collapse collapse right-menu">
          <ul class="nav navbar-nav navbar-right topmenu">
            <!-- This will get populated -->
          </ul>
        </div>
      </div>
    </nav>
    <div class="container-fluid main-page">
      <div class="row">
        <div class="menu-drawer">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </div>
        <div class="col-sm-3 col-md-2 sidebar">
          <div id="navSidebar">
            <ul class="nav nav-sidebar" isolateClick>
              <div id="catTitle">
                <div class="icon-container-head">
                  <img class="icon-header" ng-src="images/sidebar-images/menu.png"/>
                </div>
                <div class="category-main-header"><h4>Categories</h4></div>
                <div class="sidebar-header-close">
                  <img src = "images/sidebar-images/close.png">
                </div>
              </div>
              <li ng-repeat="category in categoryKeys track by $index" class="list-item">
                <a href="#{{category.name | nospace}}" ng-click="categoryFilter($event)" id="{{category.name | nospace}}">
                  <div class="flex-container" id="{{category.name | nospace}}">
                    <div class="icon-container" ng-style="{{category.style}}">
                      <img class="icon" ng-src="images/sidebar-images/{{category.image}}"
                              id="{{category.name | nospace}}"/>
                    </div>
                    <div class="category-main" id="{{category.name | nospace}}">{{category.name}}</div>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <p class="color-black">Contribute your app on
            <a href="https://github.com/fossasia/apps.loklak.org">Github</a>!</p>
        </div>
        <div class="page-header">
          <h1>
            <code id="categoryName">All apps</code>
          </h1>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <center>
            <div class="content class" ng-repeat="app in apps track by $index">
              <div ng-if = "searchTerm.length == 0 && (category == null ||
                (category == app.applicationCategory.split(' ').join('')))"
                class="span2 animated fadeIn" id="{{app.applicationCategory | nospace}}">
                <div class="reveal">
                  <img ng-src="../{{ app.name }}/screenshot.png" />
                  <div class="hidden">
                    <div class="caption">
                      <div class="centered">
                        <p><a href='../details.html?q={{app.name}}'>{{ app.headline | uppercase}}</a></p>
                        <p class="color-black">{{ app.alternativeHeadline }}</p>
                        <br/>
                        <p class="color-black">
                          Author: <a href='{{ app.author.url }}'>{{ app.author.name | uppercase }} </a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div ng-if = "searchTerm.length>0 &&
                            ((app.name.toUpperCase().indexOf(searchTerm.toUpperCase())!=-1) ||
                            (app.headline.toUpperCase().indexOf(searchTerm.toUpperCase())!=-1) ||
                            ((app.author.name.toUpperCase().indexOf(searchTerm.toUpperCase())!=-1)))"
                   class="span2 animated fadeIn" id="{{app.applicationCategory | nospace}}">
                <div class="reveal">
                  <img ng-src="../{{ app.name }}/screenshot.png" />
                  <div class="hidden">
                    <div class="caption">
                      <div class="centered">
                        <p><a href='../details.html?q={{app.name}}'>{{ app.headline | uppercase}}</a></p>
                        <p class="color-black">{{ app.alternativeHeadline }}</p>
                        <br/>
                        <p class="color-black">
                          Author: <a href='{{ app.author.url }}'>{{ app.author.name | uppercase }}</a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </center>
        </div>
      </div>
      <div class="not-found" ng-if="notFound">
      </div>
    </div>
    <script src="app_list.js"></script>
    <script src="js/bootstrap.min.js" async></script>
    <script src="js/ie10-viewport-bug-workaround.js" async></script>
    <script src="js/typeahead.bundle.js" async></script>
  </body>
</html>
